<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人员新增</title>
    <script src="../../../../../res/js/jquery-3.4.1.min.js"></script>
    <script charset="utf-8" src="../../../../../res/layui/layui.js"></script>
    <script src="../../../../../res/js/Tools.js"></script>
    <link href="../../../../../res/layui/css/layui.css" media="all" rel="stylesheet">
    <link href="../../../../../res/echarts/eleTree.css" rel="stylesheet"/>
    <script src="../../../../../res/echarts/eleTree.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="../../../../../res/images/favicon.ico">
    <script charset="utf-8" src="../../../../../res/js/login_common.js"></script>
    <style type="text/css">
        body {
            padding: 10px;
        }
    </style>
</head>
<body>
<form action="" class="layui-form layui-form-pane">
    <input type="hidden" name="pkPersonnelId" id="pkPersonnelId">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">人员姓名</label>
            <div class="layui-input-inline" style="float: left">
                <input autocomplete="off" class="layui-input" lay-reqtext="人员名是必填项，岂能为空？" lay-verify="required"
                       name="personnelName" id="personnelName" placeholder="请输入(必填项)" type="text">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <select lay-verify="required" lay-filter="organizationId" name="organizationId" id="organizationId">
                    <option selected="" value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">岗位</label>
            <div class="layui-input-inline">
                <select lay-filter="aihao" name="organizationType" id="organizationType">
                    <option selected="" value=""></option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item" pane="" >
        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline" >
            <input  name="personnelSex"  id="sex" title="男" type="radio" value="1" checked="">
            <input name="personnelSex"  title="女" type="radio" value="0">
        </div>

    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">登录账号</label>
            <div class="layui-input-inline" style="float: left">
                <input autocomplete="off" class="layui-input" lay-reqtext="账号是必填项，岂能为空？" lay-verify="required"
                       name="personnelAccount"  id="personnelAccount" placeholder="请输入(必填项)" type="text"><span id="msg"></span>
            </div>
        </div>
        <div class="layui-inline" id="pwd1">
            <label class="layui-form-label">登录密码</label>
            <div class="layui-input-inline" style="float: left">
                <input  autocomplete="off" class="layui-input" lay-reqtext="登录密码是必填项，岂能为空？" lay-verify="pass"
                        name="personnelPwd" id="personnelPwd" placeholder="请输入(必填项)" type="password">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline" >
                <input autocomplete="off" class="layui-input"
                       name="personnelEmail" id="personnelEmail"
                       placeholder="请输入" type="text">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">办公电话</label>
            <div class="layui-input-inline" >
                <input autocomplete="off" class="layui-input" lay-reqtext="电话是必填项，岂能为空？"
                       name="personnelPhone" id="personnelPhone"
                       placeholder="请输入" type="text">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">微信号</label>
            <div class="layui-input-inline" style="float: left">
                <input autocomplete="off" class="layui-input" lay-reqtext="微信号是必填项，岂能为空？"
                       name="personnelWx" id="personnelWx"
                       placeholder="请输入" type="text">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-inline" style="float: left">
                <input autocomplete="off" class="layui-input"
                      name="keyword" id="keyword"
                       placeholder="请输入" type="text">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" name="remark" placeholder="请输入备注"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn site-demo-active" id="sub" lay-filter="de1" lay-submit="" type="submit">立即提交</button>
        </div>
    </div>
</form>
<script>
    $.ajaxSetup({
        async: false
    });
    var ide = getQueryString("pkPersonnelId");
    layui.use(['form', 'layedit', 'laydate', 'layer'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //加载部门下拉框
        const organizationId=getAjaxById(getRootPath()+"OaDepartmentAction/departmentfindByAll");
        $("#organizationId").html('<option value="">请选择部门</option>');
        $.each(organizationId.data,function (index,item) {
            $("#organizationId").append('<option value="'+item.pkDepartmentId+'">'+item.departmentName+'</option>')
        });
        //由部门选择岗位
        form.on('select(organizationId)', function(data){
            if(data.value){
                console.log(data.value);
                //加载岗位下拉框
                const organizationType=getAjaxById(getRootPath()+"OaOrganizationAction/organizationFind/"+data.value);
                $("#organizationType").html('<option value="">请选择岗位</option>');
                $.each(organizationType.data,function (index,item) {
                    $("#organizationType").append('<option value="'+item.pkPostId+'">'+item.postName+'</option>')
                });
            }else{
                $("#organizationType").html('<option value="">请选择岗位</option>');
            }
            form.render();
        });
        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');
        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , content: function (value) {
                    layedit.sync(editIndex);
            } ,  keyword:function(value){
                }
        });

        //监听提交
        form.on('submit(de1)', function (data) {
            // 单击之后提交按钮不可选,防止重复提交
            var DISABLED = 'layui-btn-disabled';
            // 增加样式
            $('.site-demo-active').addClass(DISABLED);
            // 增加属性
            $('.site-demo-active').attr('disabled', 'disabled');

            var url=getRootPath() + "/OaPersonnelAction/addOrUpdate";
            let res=postAjax(url,data.field);
            if(res.code===1){
                parent.layui.table.reload('test');//刷新父页面
                layer.msg("操作成功", {icon: 1});
                const index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                parent.layer.close(index);
            }else{
                layer.msg("操作失败");
            }
            return false;
        });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
        });
        ///修改操作
        if (ide) {
            findById(ide);//修改页面的赋值
            form.render();
            $("#pwd1").remove();
        }
        //重新渲染表单函数
        function renderForm() {
            layui.use('form', function () {
                var form = layui.form(); //高版本建议把括号去掉，有的低版本，需要加()
                form.render();
            });
        }
        form.render();
    });

    function findById(ide){
        let url=getRootPath()+"OaPersonnelAction/selectById/"+ide;
        let data=getAjaxById(url);
        $("#pkPersonnelId").val(data.data.pkPersonnelId);
        $("#personnelName").val(data.data.personnelName);
        $("#personnelAccount").val(data.data.personnelAccount);
        $("#personnelEmail").val(data.data.personnelEmail);
        $("#personnelPhone").val(data.data.personnelPhone);
        $("#personnelWx").val(data.data.personnelWx);
        $("#keyword").val(data.data.keyword);
        $("#organizationId").val(data.data.organizationId);
        if (data.data.organizationId){
            url =getRootPath()+"OaOrganizationAction/organizationFind/"+data.data.organizationId;
            const datas=getAjaxById(url);
            $("#organizationType").html('<option value="">请选择岗位</option>');
            $.each(datas.data,function(index,item){
                $("#organizationType").append("<option value='"+item.pkPostId+"'>"+item.postName+"</option>");
            });
            $("#organizationType").val(data.data.organizationType);
        }

        $("input[name=personnelSex][value='0']").attr("checked", data.data.personnelSex == 0 ? true : false);
        $("input[name=personnelSex][value='1']").attr("checked", data.data.personnelSex == 1 ? true : false);
     }
    $(function(){
        //给文本框绑定失去焦点的事件
        $("#personnelAccount").blur(function(){
            var message = '';
            if (ide==null){
                const res=getAjax(getRootPath() + "OaPersonnelAction/selectAccount",{personnelAccount:this.value});
                if(res.code){
                    message ="账号已存在，请重新输入";
                    $("#personnelAccount").val("");
                    $("#msg").css("color","red").html(message);
                    return false;
                }else{
                    message='';
                }
            }else{
                const res=getAjax(getRootPath() + "OaPersonnelAction/selectAccount",{personnelAccount:this.value,pkPersonnelId:ide});
                if(res.code){
                    message='帐号已存在，请重新输入';
                    $("#personnelAccount").val("");
                    $("#msg").css("color","red").html(message);
                    return false;
                }else{
                    message='';
                }
            }
            //需要注意 需要将返回信息写在ajax方法外
            if (message !== '')
                return message;
        })
    });
</script>
</body>
</html>